<template>
  <div>
    <h2>Lifecycle Hook Listeners Demo</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    
    <!-- 使用 @vue:updated 监听子组件 updated 钩子 -->
    <HelloComponent 
      :count="count" 
      @vue:updated="handleUpdated"
      @vue:mounted="handleMounted"
    />
    
    <!-- 在 Vue 2 中使用的 @hook 语法（也兼容 Vue 3） -->
    <HelloComponent 
      :count="count" 
      @hook:updated="handleHookUpdated"
      @hook:mounted="handleHookMounted"
      style="margin-top: 20px;"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HelloComponent from './Hello.vue'

const count = ref(0)

const increment = () => {
  count.value++
}

const handleUpdated = () => {
  console.log('子组件 updated 钩子被触发 (@vue:updated)')
}

const handleMounted = () => {
  console.log('子组件 mounted 钩子被触发 (@vue:mounted)')
}

const handleHookUpdated = () => {
  console.log('子组件 updated 钩子被触发 (@hook:updated)')
}

const handleHookMounted = () => {
  console.log('子组件 mounted 钩子被触发 (@hook:mounted)')
}
</script>